<template>
	<view class="my-container">
		<image class="my-container-img" src="/static/open.jpg" mode="heightFix"></image>
		<view class="my-container-bg"></view>
		<view class="my-main">
			<view class="my-main-item" v-for="(door, index) in doors" :key="door.EQ_AutoID" @click="unlockDoor(door)">
				<image :src="'/static/door/door-' + (index + 1) + '.png'" mode="widthFix"></image>
				<text>{{door.EQ_Name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import lockApi from '../../api/open';

	const doors = ref([]);

	onMounted(() => {
		search();
	});
	const search = async () => {
		const res = await lockApi.searchEquipment();
		console.log(res);
		if (res.State) {
			doors.value = res.Data;
		} else {
			uni.showModal({
				showCancel: false,
				content: "未查询到数据，请稍后再试！"
			})
		}
	}

	const unlockDoor = async (door) => {
		const res = await lockApi.unlock({
			Channel: door.EQ_Num
		});
		console.log(res);
		if (res.State) {
			// doors.value = res.Data;
			uni.showModal({
				showCancel: false,
				content: "开锁成功"
			})
		} else {
			uni.showModal({
				showCancel: false,
				content: res.Msg || "打开门禁失败，请稍后再试！"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		height: calc(100vh - 50rpx);
		overflow-y: hidden;
		display: flex;

		.my-container-img {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;

		}

		.my-container-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.my-main {
			z-index: 999;
			margin: auto;
			color: #333;

			.my-main-item {
				width: 350rpx;
				background-color: #fff;
				padding: 40rpx 20rpx;
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				border-radius: 20rpx;

				image {
					width: 80rpx;
					margin: 0 20rpx 0 30rpx;
				}

				text {
					flex: 1;
					// text-align: center;
				}
			}
		}
	}
</style>